<template>
  <div class="container">
    <div class="title">{{ title }}</div>

    <a-form id="components-form-demo-normal-login" class="login-form" @submit="handleSubmit" :model="formState">
      <a-form-item>
        <a-input class="input-cc" v-model:value="formState.username" placeholder="用户">
          <template #prefix>
            <user-outlined style="color: rgba(0, 0, 0, 0.85)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input class="input-cc" v-model:value="formState.password" type="password" placeholder="密码">
          <template #prefix>
            <lock-outlined style="color: rgba(0, 0, 0, 0.85)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" :loading="loading" html-type="submit" class="login-button">
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onActivated, onMounted } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { env } from '@/utils/env'

import { useRouter } from 'vue-router'
import { login } from '@/api/loginApi'
import { md5 } from 'js-md5'
import { useTokenStore } from '@/stores/token'
import type { UserLogin } from '@/types/UserLogin';
import { useCookies } from "vue3-cookies";


const { cookies } = useCookies();
const router = useRouter()
const tokenStore = useTokenStore()
const loading = ref(false)
const formState = ref<any>({});
const title = ref(env.VITE_GLOB_APP_TITLE)
const handleSubmit = async () => {
  try {
    loading.value = true
    let res = await login({
      username: formState.value.username,
      password: formState.value.password,
    })
    if(res.code == 0){
      cookies.set("Authorization", res.data, 0)
      router.push('/company/companyList')
    } else {
      message.error(res.message)
    }
    
  } catch (error:any) {
      
  }
  loading.value =false
};

onMounted(async () => {

})

</script>

<style scoped>
.container {
  height: 100%;
  background: #f0f2f5 url(../assets/background.svg) no-repeat 50%;
  background-size: 100%;
  position: relative;
}

.title {
  font-size: 33px;
  padding: 100px 0 0 0;

  text-align: center;
}

.login-form {
  max-width: 300px;
  margin: 30px auto;
}

.login-button {
  width: 100%;
  height: 40px;
}

.input-cc {
  height: 40px;
}
</style>